import { cn } from '@LOW-CODE/shadcn/lib/utils'
import { PlusCircle, TableOfContents, Variable} from 'lucide-react'
import { ComponentPanel } from './ComponentPanel'
import { useState } from 'react';

type EditorLeftPanelMenuType = 'components' | 'layer' | 'state'

const menus: { menu: EditorLeftPanelMenuType; icon: React.ReactNode }[] = [
    { menu: 'components', icon: <PlusCircle size={20} /> },
    { menu: 'layer', icon: <TableOfContents size={20} /> },
    { menu: 'state', icon: <Variable size={20} /> },
]

export function EditorLeftPanel() {
    const [activeMenu, setActiveMenu] = useState<EditorLeftPanelMenuType | null>('components')

    const handleMenuItemClick = (menu: EditorLeftPanelMenuType) => {
        if(menu === activeMenu) {
            setActiveMenu(null)
        } else {
            setActiveMenu(menu)
        }
    }
    return (
        <div className="flex flex-row border-r select-none">
            <div className="flex flex-col flex-shrink-0 items-center gap-4 w-[50px] h-full py-4">
                {menus.map((item, index)=>{
                    return (
                        <div key={index} className={cn("flex items-center justify-center size-9 rounded-md cursor-pointer hover:text-foreground text-zinc-400", activeMenu === item.menu && 'text-foreground bg-zinc-100')} onClick={() => handleMenuItemClick(item.menu)}>
                            {item.icon}
                        </div>
                    )
                })}
            </div>
            {
                activeMenu && (
                    <div className="w-[278px] bg-zinc-50 border-1">
                        {activeMenu === 'components' && <ComponentPanel />}
                    </div>
                )
            }
        </div>
    )
}